<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志 备注WEB</title>
</head>
<link rel="stylesheet" href="./Link/Link.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div class="time">
        <!-- 输出时间 -->
        <h1>{{currentTime}}</h1>
        </div>
    </div>
    <div class="box1">
        <h1>Todo App</h1>
        <div class="tx">
        <input 
            type="text" 
            id="AddTodo" 
            v-model="inputValue" 
            @keyup.enter="addItem"
            placeholder="Add todo" 

            >
            <button @click="addItem">Add todo</button>
        </div>
        <div class="spp">
        <div v-for="(item,index) in item" :key="index" ><label ><input type="checkbox">{{item}}</label></input>
            <a href="#" @click="removeItem(index)" >del</a></div>  
        </div>
        <ul class="list">
            <li @click="toggleClass" :class="{delete:isDelete}" v-for="(tx,index) in tx" :key="index" ><label><input type="checkbox" name="" id="add" >{{tx}}</input></label>
             <a href="#"  >del</a></li>
        </ul>
    </div>
    <script>
        let app = new Vue({
            el:'.list',
            data:{
                tx:['吃饭','睡觉','打豆豆'],
                isDelete:false
            },methods: {
                toggleClass(){
                    this.isDelete =!this.isDelete;
                }
            },
        })
        let AddTodo = new Vue({
    el:'.box1',
    data: {
        inputValue:'',
        item:[]
    },
    methods: {
        addItem(){
            if(this.inputValue.trim()!==''){
                this.item.push(this.inputValue)
                this.inputValue = ''; // 清空输入框
            }
        },
        removeItem(index){
            this.item.splice(index,1)
        }
    }
})
new Vue({
    el: '.time',
    data: {
        currentTime: ''
    },
    methods: {
        updateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            this.currentTime = `${hours}:${minutes}:${seconds}`;
        }
    },
    mounted() {
        this.updateTime(); // 初始化时间
        setInterval(this.updateTime, 1000); // 每秒更新一次时间
    }
});


    </script>
    <script src="./SRC/Code.js"></script>

</body>

</html>